
var flag1 = true;
$(".tab1").on("click",function(){
	
	if(flag1 == true) {
		$("#i1").css({
			transform: "rotate(90deg)",
			color:"lightgreen"
		});
		$(".downWindow1").css({
			display:"block"
		})
		$(".downWindow1").animate({
			height: 200,
		}, 200);
		flag1 = false;
	} else {
		$("#i1").css({
			transform: "rotate(0deg)",
			color:"gray"
		});
		$(".downWindow1").animate({
			height: 0,
		}, 200);
		
		setTimeout(function(){
			$(".downWindow1").css({
			display:"none"
		})
		},200)
		flag1 = true;
	}
})

var flag2 = true;
$(".tab2").on("click",function(){
	
	if(flag2 == true) {
		$("#i2").css({
			transform: "rotate(90deg)",
			color:"lightgreen"
		});
		$(".downWindow2").css({
			display:"block"
		})
		$(".downWindow2").animate({
			height: 600,
		}, 300);
		flag2 = false;
	} else {
		$("#i2").css({
			transform: "rotate(0deg)",
			color:"gray"
		});
		
		$(".downWindow2").animate({
			height: 0,
		}, 300);
		
		setTimeout(function(){
			$(".downWindow2").css({
			display:"none"
		})
		},300)
		flag2 = true;
	}
})


var flag3 = true;
$(".tab3").on("click",function(){
	
	if(flag3 == true) {
		$("#i3").css({
			transform: "rotate(90deg)",
			color:"lightgreen"
		});
		$(".downWindow3").css({
			display:"block"
		})
		$(".downWindow3").animate({
			height: 200,
		}, 300);
		flag3 = false;
	} else {
		$("#i3").css({
			transform: "rotate(0deg)",
			color:"gray"
		});
		
		$(".downWindow3").animate({
			height: 0,
		}, 300);
		
		setTimeout(function(){
			$(".downWindow3").css({
			display:"none"
		})
		},300)
		flag3 = true;
	}
})
	
